<template>
   <div>房源管理
      <el-tabs type="border-card">
         <el-tab-pane label="新房售卖">

            <Selsec></Selsec>

            <div class="box">
               <el-form-item label="用户名称" prop="username">
                  <el-input style="width: 200px;" v-model="soudata"></el-input>
               </el-form-item>
               <el-button type="primary" @click="btnc" class="btn">查询</el-button>
            </div>

            <el-button type="primary" @click="add">新增</el-button>

            <!-- 渲染数据的表单 -->
            <el-table :data="tableData" style="width: 100%">
               <el-table-column  prop="id" label="序号" width="250" />
               <el-table-column prop="resident" label="楼盘名称" width="100" />
               <el-table-column prop="name" label="详情地址" width="100" />
               <el-table-column prop="price" label="价格" width="100" />
               <el-table-column prop="extent" label="排序" width="100" />
               <el-table-column prop="update_time" label="更新时间" width="160" />
               <el-table-column prop="Renting" label="状态" width="100" />
               <el-table-column prop="broker" label="经纪人" width="100">



                  <!-- <template #default="scope">
                     <el-switch v-model="scope.row.state" class="ml-2" width="60" inline-prompt active-text="启用"
                        inactive-text="未启用" />
                  </template> -->

               </el-table-column>
               <el-table-column  label="操作" width="400">
                  <template #default="scope">
                     <el-button link type="primary" size="small" @click="view(scope.row)">详情</el-button>
                     <el-button link type="primary" size="small" @click="edit(scope.row)">编辑</el-button>
                     <el-button link type="primary" size="small" @click="deltelist(scope.row.id)">删除</el-button>


                     <el-button link type="primary" size="small" v-if="scope.row.broker ==='' " @click="zhipai(scope.row)">指派经纪人</el-button>
                     <div v-if="scope.row.broker !=''">
                         <el-button  link  type="primary" size="small" v-if="scope.row.broker " @click="gaibian(scope.row)"> <span v-show="hhh">房源未提交</span></el-button>
                     <el-button  link  type="primary" size="small" v-if="scope.row.fang" >  房源已提交 </el-button>

                     </div>
                  </template>
               </el-table-column>
            </el-table>
            <div>
  
                     
                     <el-pagination
                        v-model:current-page="currentPage4"
                        v-model:page-size="pageSize4"
                        :page-sizes="[5, 10, 15, 20]"
                        :small="small"
                        :disabled="disabled"
                        :background="background"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="20"  
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                     />
             
            </div>
            
    
            <!-- 指派经纪人 -->
            
   <el-dialog v-model="dialogFormVisible2" title="指定经纪人">
               
          <el-form :model="form3">
                
                  <el-form-item label="经纪人" :label-width="formLabelWidth">
                     <el-input v-model="form3.broker" autocomplete="off" />
                  </el-form-item>


               </el-form>

          <template #footer="scope">
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible2 = false">Cancel</el-button>
        <el-button type="primary" @click="queding">
          Confirm
        </el-button>
      </span>
    </template>
        </el-dialog>


            <el-dialog v-model="dialogFormVisible" :title=str>
               <el-form :model="form">
                  <el-form-item label="序号" :label-width="formLabelWidth">
                     <el-input v-model="form.id" autocomplete="off" />
                  </el-form-item>
                  <el-form-item label="排序" :label-width="formLabelWidth">
                     <el-input v-model="form.extent" autocomplete="off" />
                  </el-form-item>
                  <el-form-item label="楼盘名称" :label-width="formLabelWidth">
                     <el-input v-model="form.resident" autocomplete="off" />
                  </el-form-item>
                  <el-form-item label="详情地址" :label-width="formLabelWidth">
                     <el-input v-model="form.communityName" autocomplete="off" />
                  </el-form-item>
                  <el-form-item label="价格" :label-width="formLabelWidth">
                     <el-input v-model="form.price" autocomplete="off" />
                  </el-form-item>
                  <el-form-item label="更新时间" :label-width="formLabelWidth">
                     <el-input v-model="form.update_time" autocomplete="off" />
                  </el-form-item>
                  <el-form-item label="经纪人" :label-width="formLabelWidth">
                     <el-input v-model="form.broker" autocomplete="off" />
                  </el-form-item>


               </el-form>
               <template #footer>
                  <span class="dialog-footer">
                     <el-button @click="dialogFormVisible = false">Cancel</el-button>
                     <el-button type="primary" @click="dialogFormVisible = false">
                        <span @click="submit(form)">Confirm</span>
                     </el-button>
                  </span>
               </template>
            </el-dialog>


              <el-dialog v-model="twoding" :title=str>
               <el-form :model="form2">
                  <el-form-item label="序号" :label-width="formLabelWidth">
                     <el-input v-model="form2.id" autocomplete="off" />
                  </el-form-item>
                  <el-form-item label="排序" :label-width="formLabelWidth">
                     <el-input v-model="form2.extent" autocomplete="off" />
                  </el-form-item>
                  <el-form-item label="楼盘名称" :label-width="formLabelWidth">
                     <el-input v-model="form2.resident" autocomplete="off" />
                  </el-form-item>
                  <el-form-item label="详情地址" :label-width="formLabelWidth">
                     <el-input v-model="form2.communityName" autocomplete="off" />
                  </el-form-item>
                  <el-form-item label="价格" :label-width="formLabelWidth">
                     <el-input v-model="form2.price" autocomplete="off" />
                  </el-form-item>
                  <el-form-item label="更新时间" :label-width="formLabelWidth">
                     <el-input v-model="form2.update_time" autocomplete="off" />
                  </el-form-item>
                  <el-form-item label="经纪人" :label-width="formLabelWidth">
                     <el-input v-model="form2.broker" autocomplete="off" />
                  </el-form-item>


               </el-form>
               <template #footer>
                  <span class="dialog-footer">
                     <el-button @click="dialogFormVisible = false">Cancel</el-button>
                     <el-button type="primary" @click="dialogFormVisible = false">
                        <span @click="qeuding(form2)">Confirm</span>
                     </el-button>
                  </span>
               </template>
            </el-dialog>

            <el-dialog v-model="FormVisible" :title=str>
               <el-radio-group v-model="newBroker">
                  <el-radio :label="3">AOption </el-radio>
                  <el-radio :label="6">Option B</el-radio>
                  <el-radio :label="9">Option C</el-radio>
               </el-radio-group>
               <template #footer>
                  <span class="dialog-footer">
                     <el-button @click="FormVisible = false">Cancel</el-button>
                     <el-button type="primary" @click="FormVisible = false">
                        <span @click="clone">Confirm</span>
                     </el-button>
                  </span>
               </template>
            </el-dialog>

         </el-tab-pane>
         <el-tab-pane label="二手房售卖"></el-tab-pane>
         <el-tab-pane label="房屋租赁">
   <Selsec></Selsec>

            <div class="box">
               <el-form-item label="用户名称" prop="username">
                  <el-input style="width: 200px;" v-model="soudata"></el-input>
               </el-form-item>
               <el-button type="primary" @click="btnc" class="btn">查询</el-button>
            </div>

            <el-button type="primary" @click="add">新增</el-button>


            <el-table :data="tableData" style="width: 100%">
               <el-table-column fixed prop="id" label="序号" width="100" />
               <el-table-column prop="resident" label="楼盘名称" width="100" />
               <el-table-column prop="name" label="详情地址" width="100" />
               <el-table-column prop="price" label="价格" width="100" />
               <el-table-column prop="extent" label="排序" width="100" />
               <el-table-column prop="update_time" label="更新时间" width="160" />
               <el-table-column prop="Renting" label="状态" width="100" />
               <el-table-column prop="broker" label="经纪人" width="100">



                  <!-- <template #default="scope">
                     <el-switch v-model="scope.row.state" class="ml-2" width="60" inline-prompt active-text="启用"
                        inactive-text="未启用" />
                  </template> -->

               </el-table-column>
               <el-table-column fixed="right" label="操作" width="400">
                  <template #default="scope">
                     <el-button link type="primary" size="small" @click="view(scope.row)">详情</el-button>
                     <el-button link type="primary" size="small" @click="edit(scope.row)">编辑</el-button>
                     <el-button link type="primary" size="small" @click="deltelist(scope.row.id)">删除</el-button>

             
                  </template>
               </el-table-column>
            </el-table>

            <!-- <div class="demo-pagination-block">
               <div class="demonstration">Jump to</div>
               <el-pagination :small="small" :disabled="disabled" layout="prev, pager, next, jumper" :total="1000"
                  @size-change="handleSizeChange" @current-change="handleCurrentChange" />
            </div> -->

            <el-dialog v-model="dialogFormVisible" :title=str>
               <el-form :model="form">
                  <el-form-item label="序号" :label-width="formLabelWidth">
                     <el-input v-model="form.id" autocomplete="off" />
                  </el-form-item>
                  <el-form-item label="排序" :label-width="formLabelWidth">
                     <el-input v-model="form.extent" autocomplete="off" />
                  </el-form-item>
                  <el-form-item label="楼盘名称" :label-width="formLabelWidth">
                     <el-input v-model="form.resident" autocomplete="off" />
                  </el-form-item>
                  <el-form-item label="详情地址" :label-width="formLabelWidth">
                     <el-input v-model="form.communityName" autocomplete="off" />
                  </el-form-item>
                  <el-form-item label="价格" :label-width="formLabelWidth">
                     <el-input v-model="form.price" autocomplete="off" />
                  </el-form-item>
                  <el-form-item label="更新时间" :label-width="formLabelWidth">
                     <el-input v-model="form.update_time" autocomplete="off" />
                  </el-form-item>
                  <el-form-item label="经纪人" :label-width="formLabelWidth">
                     <el-input v-model="form.broker" autocomplete="off" />
                  </el-form-item>


               </el-form>
               <template #footer>
                  <span class="dialog-footer">
                     <el-button @click="dialogFormVisible = false">Cancel</el-button>
                     <el-button type="primary" @click="dialogFormVisible = false">
                        <span @click="submit(form)">Confirm</span>
                     </el-button>
                  </span>
               </template>
            </el-dialog>


            <el-dialog v-model="FormVisible" :title=str>
               <el-radio-group v-model="newBroker">
                  <el-radio :label="3">AOption </el-radio>
                  <el-radio :label="6">Option B</el-radio>
                  <el-radio :label="9">Option C</el-radio>
               </el-radio-group>
               <template #footer>
                  <span class="dialog-footer">
                     <el-button @click="FormVisible = false">Cancel</el-button>
                     <el-button type="primary" @click="FormVisible = false">
                        <span @click="clone">Confirm</span>
                     </el-button>
                  </span>
               </template>
            </el-dialog>
         </el-tab-pane>
      </el-tabs>
   </div>
</template>
<script  setup>
import { ref } from 'vue'
import { GETHOUSE, ADDDATA, DELETELIST, EDITHOUSE, CHAHOUSE,GETTWO,XIUGAIJINJI} from "../../api/daili"

import {
   Check,
   CircleCheck,
   CirclePlus,
   CirclePlusFilled,
   Plus,
} from '@element-plus/icons-vue'
import { ArrowDown } from '@element-plus/icons-vue'
import Selsec from "../../components/loding/selsect.vue"
import { onMounted, reactive } from 'vue';
const checked = ref(1)

const str = ref('新增')
const soudata = ref('')
const currentPage = ref(1)
const pageSize = ref(2)
const selectedRow = ref(null);
const small = ref(false)
const background = ref(false)
const disabled = ref(false)
const FormVisible = ref(false)
// const dialogTableVisible = ref(false)
const dialogFormVisible = ref(false)
const formLabelWidth = '140px'


// const handleSizeChange1 = (pageSize) => {
//    console.log(pageSize,"sadw");
//   params.value.pageSize = pageSize;
//   params.value.currentPage = 1;
//   getList();
// };
// const handleCurrentChange1 = (currentPage) => {
//   params.value.currentPage = currentPage;
//   getList();
// };
const isshow=ref(false)
const hhh =ref(true)
const gaibian=(data)=>{

   console.log(data);
   const index =tableData.value.indexOf(data)
   tableData.value[index].fang= !tableData.value[index].fang

}
const twoding = ref(false)

//房屋租聘

const form = ref({
   id: "",
   resident: "",
   communityName: "",
   price: "",
   update_time: "",
   Renting: "",
   broker: "",
   name: "",
})

const tabindex = ref(-1)
 const form2 =ref ({
  toward: '',
  id:"",
  subway: '',
  lift: '',
  house_type: '',
  way: '',
  img: '',
  price: 0,
  broker: '',
  ll: '',
  building_type: '',
  section: '',
  extent: '',
  name: '',
  brand: '',
  periods: '',     
  area: '',
  feature: '',
  resident: '',
  useto: '',
  pay: '',
  lease: '',
  renovation: '',
  status: 0,
  position: ''
}
     )

const getdata = () => {
   const start = (currentPage.value - 1) * pageSize.value
   const end = start + pageSize.value
   tableData.value = tableData._rawValue.slice(start, end)

}
const handleSizeChange= (val) => {
   pageSize.value = val;
   onsole.log(pageSize.value);
   getdata()
}
const handleCurrentChange = (val) => {
   currentPage.value = val;
   console.log(currentPage);
   getdata()
}

onMounted(() => {
   getList()
   getdata()
   // gettwodata()
})
const tableData = ref('')

const getList = () => {
   
   GETHOUSE().then((result) => {
      console.log(result);
      tableData.value = result.data.data

   }).catch((err) => {

   });
}

//删除
const deltelist = (id) => {
   DELETELIST(id).then(res => {

      getList().then((res) => {
         tableData.value = res.data.data
      })
   })

}

const submit = () => {
   if (str.value === '新增') {
      // console.log(form.value,"!1111");
     
       
ADDDATA(form2).then(res => {
         console.log(res, "新增");
         getList()
      })

    
   } else if (str.value === '编辑') {
      const data = {
         toward: "",
         subway: "",
         lift: "",
         house_type: "",
         way: "",
         img: "",
         price: form.value.price,
         broker: form.value.broker,
         resident: form.value.resident,
         name: form.value.name,
         area: form.value.area,
         ll: "",
         building_type: "",
         section: "",
         extent: form.value.area,
         brand: "",
         periods: "",
         feature: "",
         useto: "",
         pay: "",
         lease: "",
         renovation: "",
         status: 0,
         position: "",
         id: form.value.id

      }
      console.log(data, "dwwww");
      EDITHOUSE(data).then(res => {
         console.log(res, ":");
      })
   }
   else if (str.value === '详情') {

   }
}
///修改
const edit = (row) => {

   dialogFormVisible.value = true
   str.value = '编辑'
   form._value = row
}
//详情
const view = (row) => {
   dialogFormVisible.value = true
   str.value = '详情'
   form._value = row
}
//查询
const btnc = () => {

   if (soudata.value == '') {
      GETHOUSE().then((result) => {

         if(result.data.code==1)
         {
            tableData.value=res.data.data
         }
      })
   }else{
      const sou={
         name:soudata.value
      }
      CHAHOUSE(sou).then((res)=>{
         tableData.value=res.data.data
        
      })
   }

}


const handleClick = (tab) => {
   str.value = '详情'
   dialogFormVisible.value = true
   form.value = tab

}
const qeuding=(form2)=>{
    twoding.value = false
    const data ={
        toward: "",
         subway: "",
         lift: "",
         house_type: "",
         way: "",
         img: "",
         price: 0,
         broker:form2.broker,
         resident:"",
         name: "",
         area: "",
         ll: "",
         building_type: "",
         section: "",
         extent: form2.extent,
         brand: "",
         periods: "",
         feature: "",
         useto: "",
         pay: "",
         lease: "",
         renovation: "",
         tatus: 0,
         position: "",
         id: "",
         communityName:form2.communityName
}
      console.log(form2,"111111111");
  ADDDATA(form2).then(res => {
         console.log(res, "新增");
         getList()
      })
}

const zhip=ref(0)
const dialogTableVisible2 = ref(false)
const dialogFormVisible2 = ref(false)
const form3= ref({
 broker:"",
})
const non = ref('指派经纪人')
//指派经纪人
const zhipai=(mmm)=>{
   // console.log(mmm,"dwa");
   form3.value={...mmm}
   // console.log(form3);
   dialogFormVisible2.value=true
   
}
const queding=()=>{
      console.log(form3,"dafegrtre");
      let params ={
         id:form3.value.id,
         broker:form3.value
      }
      console.log(params,"ssss");
      console.log(params.id,"6666666");
      XIUGAIJINJI(params).then((res)=>{
         console.log(res,"1111");
         tableData.value.broker=res.value
      })
   dialogFormVisible2.value=false
}
const add = () => {
   twoding.value = true
   str.value = '新增'

}
// const dialogFormVisible2=()=>{

// }


const inp =(zhip)=>{
   console.log(zhip);
}
const clone = () => {
   console.log(checked);
}
</script>
<style  scoped>
.demo-tabs>.el-tabs__content {
   padding: 32px;
   color: #6b778c;
   font-size: 32px;
   font-weight: 600;
}

.example-showcase .el-dropdown-link {
   cursor: pointer;
   color: var(--el-color-primary);
   display: flex;
   align-items: center;
}

.block-col-2 .demonstration {
   display: block;
   color: var(--el-text-color-secondary);
   font-size: 14px;
   margin-bottom: 20px;
}

.pop {
   position: absolute;
   right: 300px;
   top: 30px;
}

.demo-pagination-block+.demo-pagination-block {
   margin-top: 10px;
}

.btn {
   width: 100px;
   height: 2rem;
   background: #169bd5;

   color: #fff;

   margin-left: 280px;
   margin-top: -50px;
}

.demo-pagination-block .demonstration {
   margin-bottom: 16px;
}

.pnp {
   margin-left: 150px;
}

.box {
   width: 400px;
   height: 100px;

   float: left;
   position: absolute;
   top: 40px;
   right: 50px;
   float: left;
}
</style>